import type { BaiduElements } from '../../../../../../../../types/constants'
import type { ThemeType } from '../../../../../../../../types/interfaces'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { PageBaseStyles } from '../../../base'
import { SearchCommonStyles } from '../../common'

export class BaiduMorePage {
  elements: BaiduElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.BAI_DU]
  private static instance: BaiduMorePage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly pageBaseStyles: PageBaseStyles = PageBaseStyles.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): BaiduMorePage {
    if (!BaiduMorePage.instance) {
      BaiduMorePage.instance = new BaiduMorePage()
    }
    return BaiduMorePage.instance
  }

  init(): void {
  }

  getMainStyles(_theme: ThemeType): string {
    return `
#head {
  background-color: var(${this.themeVarService.search.header.background}) !important;
  box-shadow: none !important;
}

#main {
  #content {
    margin-bottom: 20px !important;

    h3 {
      ${this.pageBaseStyles.titleStyles()}
      padding-bottom: 0 !important;
    }
    
    .con {
      ${this.searchCommonStyles.resultItemStyles({ setPadding: false })}
      padding-left: 10px !important;
      margin-top: 10px !important;
      
      ${this.pageBaseStyles.listItemHoverStyles()}
      
      a {
        color: var(${this.themeVarService.link.default.text}) !important;
        
        &:hover {
          text-decoration: none !important;
        }
      }
      
      span {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
    }
  }
}

.footer {
  background-color: transparent !important;
  border-top: none !important;
  color: var(${this.themeVarService.search.default.text}) !important;
  
  a {
    color: var(${this.themeVarService.link.default.text}) !important;
    text-decoration: none !important;
    
    &:hover {
      color: var(${this.themeVarService.link.default.textHover}) !important;
    }
  }
}
`
  }
}
